<template>
	<cl-crud @load="onLoad" :on-refresh="onRefresh" ref="curd">
		<el-row type="flex">
			<el-date-picker
				v-model="time"
				type="date"
				class="m-l-10"
				size="mini"
				placeholder="选择日期"
			>
			</el-date-picker>
			<cl-search-key placeholder="请输入资产编号/资产名称" class="m-l-10" />
			<cl-flex1 />
		</el-row>
		<el-row>
			<cl-refresh-btn />
			<el-button type="primary" @click="print(1)" class="m-l-10" size="mini"
				>打印出库单</el-button
			>
			<el-button type="primary" @click="print(2)" class="m-l-10" size="mini"
				>打印入库单</el-button
			>
		</el-row>
		<el-row>
			<cl-table v-bind="table" ref="table"> </cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<cl-pagination />
		</el-row>
	</cl-crud>
</template>

<script>
    import printJS from "print-js";
    import moment from "moment";
    export default {
        components: {},
        props: {
            barCode: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                dateTime: [],
                time: "",
                type: "",
                orderType: "",
                visible: false,
                visibleDown: false,
                form: {},
                upsert: {},
                table: {
                    on: {
                        "row-key": "id",
                        "tree-props": {
                            children: "children",
                            hasChildren: "hasChildren"
                        }
                    },
                    props: {},
                    columns: [{
                            prop: "barCode",
                            label: "资产编号",
                            align: "center",
                            "min-width": 150
                        }, {
                            prop: "orderName",
                            label: "资产名称",
                            align: "center",
                            "min-width": 150
                        }, {
                            prop: "specifications",
                            label: "型号规格",
                            align: "center",
                            "min-width": 150
                        }, {
                            prop: "kuweiName",
                            label: "库房",
                            align: "center",
                            "min-width": 150
                        }, {
                            prop: "quantityNum",
                            label: "入库数量",
                            align: "center",
                            "min-width": 150
                        }, {
                            prop: "realNum",
                            label: "出库数量",
                            align: "center",
                            "min-width": 150
                        }, {
                            prop: "updateTime",
                            label: "日期",
                            align: "center",
                            "min-width": 150
                        }
                        // , {
                        //     label: "操作",
                        //     align: "center",
                        //     type: "op",
                        //     buttons: ["edit", "delete"]
                        // }
                    ]
                }
            };
        },
        mounted() {},
        methods: {
            async print(type) {
                const data = await this.$service.warehouselogs.list({
                    time: this.time,
                    barCode: this.barCode
                });
                printJS({
                    printable: data,
                    properties: [{
                        field: "barCode",
                        displayName: "资产编号",
                        columnSize: 1
                    }, {
                        field: "orderName",
                        displayName: "资产名称",
                        columnSize: 1
                    }, {
                        field: "kuweiName",
                        displayName: "库房",
                        columnSize: 1
                    }, {
                        field: type === 1 ? "realNum" : "quantityNum",
                        displayName: "数量",
                        columnSize: 1
                    }],
                    type: "json",
                    header: `${moment().format("YYYY-MM-DD")}${type === 1 ? "出库" : "入库"}单`,
                    headerStyle: "font-weight: bold;font-size:24px;text-align:center;",
                    // 样式设置
                    gridStyle: "border: 2px solid #000;text-align:center;",
                    gridHeaderStyle: "color: #000;text-align:center;border: 2px solid #000;"
                });
            },
            async onRefresh(params, {
                next,
                render
            }) {
                let {
                    list
                } = await next({
                    ...params,
                    time: this.time,
                    barCode: this.barCode
                });
                render(list);
            },
            onLoad({
                app,
                ctx
            }) {
                if (!this.barCode && !this.time) {
                    this.time = moment().format("YYYY-MM-DD");
                }
                ctx.service(this.$service.warehouselogs).done();
                app.refresh();
            }
        }
    };
</script>

<style lang="scss">
    .m-l-10 {
        margin-left: 10px;
    }
    
    .m-r-10 {
        margin-right: 10px;
    }
    
    .sort-warp {
        height: 80vh;
    }
    
    .sure {
        float: right;
        margin-top: 10px;
    }
</style>